// 主页面
<template>
    <el-container class="home_container">
        <el-header>
            <div>
                <img src="./Login/images/logo.png" alt="">
            </div>
            <!-- 退出登录 -->
            <el-button type="info" @click="logout">退出</el-button>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu background-color="rgb(50,55,68)" text-color="#fff" active-text-color="#409BFF" unique-opened
                     :collapse-transition="false" router >
                    <el-menu-item v-for="item in menulist" :key="item.id" :index="item.path">{{ item.authName }}</el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <!-- 出口 -->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
// nanoid 随机生成id
import {nanoid} from 'nanoid'
export default {
    name: 'MyHome',
    data() {
        return {
            // 一级菜单
            menulist: [
                { id: nanoid(), authName: '首页',path:'/main'},
                { id: nanoid(), authName: '商家管理',path:'/merchant'},
                { id: nanoid(), authName: '商品管理',path:'/goods'},
                { id: nanoid(), authName: '权限管理',path:'/role'},
                { id: nanoid(), authName: '订单管理',path:'/order'},
                { id: nanoid(), authName: '用户管理',path:'/user'},
                { id: nanoid(), authName: '设置',path:'/setting'}
            ]
        }
    },
    methods: {
        // 退出登录
        logout() {
            window.sessionStorage.removeItem('token')
            this.$router.push('/login')
            if (!window.sessionStorage.removeItem('token')) {
                this.$message.success('退出登录成功')
            }
        }
    }
}
</script>

<style lang='scss' scoped>
.home_container {
    height: 100%;
}

.el-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 30px;
    color: #fff;
    background-color: rgb(55, 60, 65);
}

.el-menu-vertical-demo,
.el-aside {
    background-color: red;
}
</style>